<template>
  <div class="flex gap-10px">
    <a-button type="primary" class="mb-15px" @click="doRecognition"
      >剪切板文字识别，代码生成</a-button
    >
  </div>

  <a-collapse v-model:activeKey="activeKey">
    <a-collapse-panel key="1" header="form代码">
      <template #extra>
        <div class="fyc gap-5px" @click.stop="doCopy(formTemplateCode)">
          <SnippetsOutlined class="c-primary" />
          <span class="c-primary text-12px">复制</span>
        </div>
      </template>
      <XnHighlightjs :code="formTemplateCode" class="mb-10px" />
    </a-collapse-panel>
    <a-collapse-panel key="2" header="scripts代码">
      <template #extra>
        <div class="fyc gap-10px">
          <div class="fyc gap-5px" @click.stop="doCopy(scriptsTemplateCode)">
            <SnippetsOutlined class="c-primary" />
            <span class="c-primary text-12px">复制</span>
          </div>
        </div>
      </template>
      <XnHighlightjs :code="scriptsTemplateCode" />
    </a-collapse-panel>
  </a-collapse>
</template>

<script setup lang="ts">
const activeKey = ref<string[]>([])
import { useClipboard } from '@vueuse/core'
const { copy } = useClipboard()
import { message } from 'ant-design-vue'

const doRecognition = () => {
  activeKey.value = []
  formTemplateCode.value = ''
  scriptsTemplateCode.value = ''
  navigator.clipboard.readText().then((clipText) => {
    window.api.modaoDomToForm(clipText, (val) => {
      console.log(val)
      formTemplateCode.value = val.formTemplate
      scriptsTemplateCode.value = val.scriptsTemplate
    })
  })
}

const formTemplateCode = ref('')

const scriptsTemplateCode = ref('')

const doCopy = async (val) => {
  await copy(val)
  message.success('复制成功')
}

onMounted(() => {})
</script>

<style lang="less" scoped>
:deep(.hljs span) {
  line-height: 20px;
}
</style>
